<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue的js文件-->
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- v-if 让元素是否显示和变量建立关系，如果变量的值为false，则删除元素-->
    <h1 v-if="isVisible">刘德华</h1>
    <!-- v-else 和上面v-if的显示状态取反-->
    <h1 v-else>吴彦祖</h1>

    <hr>

    <h2 v-if="isShow==1">测试1</h2>
    <h2 v-else-if="isShow==2">测试2</h2>
    <h2 v-else>测试3</h2>

    <hr>

    <!-- v-show 控制元素的显示和隐藏，如果变量的值为false，通过display样式代码进行隐藏元素-->
    <!-- 如果需要频繁切换显示状态-->
    <h3 v-show="isVisible">张学友</h3>
</div>

<script>
    let v = new Vue({
        el:"#app",
        data:{
            isVisible: false,
            isShow: 2
        }
    })
</script>

</body>
</html>